<template>
  <div>
    <ul>
      <li>{{ count }}</li>
      <li><button @click="add">点击+1</button></li>
      <li>{{obj.name}} </li>
      <li>
        <button @click="addFn">
          点击修改值
        </button>
      </li>
      <li> {{list}} </li>
      <li> <button @click="changeObj">点击增加随机数</button> </li>
    </ul>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
/**
 * 作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
 *1. 从vue框架中导出ref函数
  2. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
  3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
  4. 注意⚠️：在setup函数中使用ref结果，需要通过.value  访问，模板中使用不需要加.value；而且可以重新=号赋值

 */
export default {
  data () {
    return {

    }
  },
  setup () {
    // 1.简单类型
    const count = ref(0)

    // 点击加1
    const add = () => {
      count.value++
    }

    // 复杂类型
    const obj = ref({
      name: '小刚'
    })
    const addFn = () => {
      obj.value.name = '刷裂缝来师傅'
    }

    const list = ref([1, 2, 3])

    const changeObj = () => {
      // obj.value = {
      //   age: 100
      // }
      list.value.push(Math.random() * 1000)
    }
    return { count, add, obj, changeObj, list, addFn }
  }
}
</script>

<style lang="scss" scoped>
</style>
